<script setup>
import { ref, onMounted } from 'vue'
import {
  User,
  Reading,
  Star,
  View
} from '@element-plus/icons-vue'

// 统计数据
const statistics = ref([
  {
    title: '学生总数',
    value: 0,
    icon: User,
    color: '#409EFF'
  },
  {
    title: '课程总数',
    value: 0,
    icon: Reading,
    color: '#67C23A'
  },
  {
    title: '课程评分',
    value: '0.0',
    icon: Star,
    color: '#E6A23C'
  },
  {
    title: '课程访问量',
    value: 0,
    icon: View,
    color: '#F56C6C'
  }
])

// 最近课程
const recentCourses = ref([])

// 待办事项
const todoList = ref([])

onMounted(() => {
  // TODO: 从API获取数据
  // 模拟数据
  recentCourses.value = [
    {
      id: 1,
      title: 'Web前端开发基础',
      students: 120,
      rating: 4.8,
      lastUpdate: '2024-03-20'
    },
    {
      id: 2,
      title: 'Vue.js实战教程',
      students: 85,
      rating: 4.9,
      lastUpdate: '2024-03-19'
    }
  ]

  todoList.value = [
    {
      id: 1,
      title: '批改作业',
      deadline: '2024-03-21',
      priority: 'high'
    },
    {
      id: 2,
      title: '准备下周课程',
      deadline: '2024-03-22',
      priority: 'medium'
    }
  ]
})
</script>

<template>
  <div class="dashboard-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics-row">
      <el-col :span="6" v-for="stat in statistics" :key="stat.title">
        <el-card class="statistics-card" :body-style="{ padding: '20px' }">
          <div class="statistics-content">
            <div class="statistics-icon" :style="{ backgroundColor: stat.color }">
              <el-icon><component :is="stat.icon" /></el-icon>
            </div>
            <div class="statistics-info">
              <div class="statistics-value">{{ stat.value }}</div>
              <div class="statistics-title">{{ stat.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区 -->
    <el-row :gutter="20" class="main-content">
      <!-- 最近课程 -->
      <el-col :span="16">
        <el-card class="recent-courses">
          <template #header>
            <div class="card-header">
              <span>最近课程</span>
              <el-button type="primary" text>查看全部</el-button>
            </div>
          </template>
          
          <el-table :data="recentCourses" style="width: 100%">
            <el-table-column prop="title" label="课程名称" />
            <el-table-column prop="students" label="学生数" width="100" />
            <el-table-column prop="rating" label="评分" width="100">
              <template #default="{ row }">
                <el-rate
                  v-model="row.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                />
              </template>
            </el-table-column>
            <el-table-column prop="lastUpdate" label="最后更新" width="120" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button type="primary" link>查看</el-button>
                <el-button type="primary" link>编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 待办事项 -->
      <el-col :span="8">
        <el-card class="todo-list">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-button type="primary" text>添加</el-button>
            </div>
          </template>
          
          <el-timeline>
            <el-timeline-item
              v-for="todo in todoList"
              :key="todo.id"
              :type="todo.priority === 'high' ? 'danger' : 'primary'"
              :timestamp="todo.deadline"
            >
              {{ todo.title }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.statistics-row {
  margin-bottom: 20px;
}

.statistics-card {
  height: 120px;
}

.statistics-content {
  display: flex;
  align-items: center;
}

.statistics-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.statistics-icon .el-icon {
  font-size: 24px;
  color: #fff;
}

.statistics-info {
  flex: 1;
}

.statistics-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
  margin-bottom: 8px;
}

.statistics-title {
  font-size: 14px;
  color: #909399;
}

.main-content {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recent-courses {
  margin-bottom: 20px;
}

.todo-list {
  height: 100%;
}

:deep(.el-timeline-item__node) {
  background-color: #409EFF;
}

:deep(.el-timeline-item__node--danger) {
  background-color: #F56C6C;
}
</style> 